<template>
	<view class="content">
		<!-- <scroll-view 
			class="list-view" 
			:scroll-y="true" 
			@scrolltolower="onReachBottom" 
			:style="{ height: '100vh' }">
			
			<view v-for="(item, index) in userList" :key="index" class="list-item">
				<image :src="item.avatar" class="avatar" />
				<view class="user-info">
					<text class="name">{{ item.name }}</text>
					<text class="gender">性别: {{ item.gender }}</text>
					<text class="age">年龄: {{ item.age }}</text>
					<text class="phone">电话: {{ item.phone }}</text>
					<text class="address">地址: {{ item.address }}</text>
				</view>
			</view>

			<view class="number-list">
				<text class="title">数字列表</text>
				<view v-for="(number, index) in displayedList" :key="index" class="number-item">
					<text>{{ number }}</text>
				</view>
				<text v-if="loading" class="loading">加载中...</text>
			</view>
		</scroll-view> -->
		<text class="title">数字列表</text>
		<view v-for="(number, index) in displayedList" :key="index" class="number-item">
			<text>{{ number }}</text>
		</view>
	</view>
</template>

<script setup>

const userList = ref([
	{
		avatar: 'https://picx.zhimg.com/v2-31fa493c8eb8e7e742eec63ede5e99fd_720w.jpg?source=172ae18b',
		name: '张三',
		gender: '男',
		age: 28,
		phone: '12345678901',
		address: '北京市朝阳区',
	},
	{
		avatar: 'https://img3.utuku.imgcdc.com/510x0/news/20250206/62d8a26a-7e82-4e2b-8ae6-9baf8d5ddd74.jpg',
		name: '李四',
		gender: '女',
		age: 25,
		phone: '10987654321',
		address: '上海市浦东新区',
	},
	// 可以继续添加更多用户数据
]);

const displayedList = ref([]); // 用于显示的数字列表
const loading = ref(false); // 加载状态
let totalItems = 1000; // 总共的数字数量
let itemsPerPage = 100; // 每页显示的数字数量
let currentPage = 0; // 当前页数

// 加载数字数据的函数
function loadData() {
	loading.value = true;
	setTimeout(() => {
		const start = currentPage * itemsPerPage;
		const end = start + itemsPerPage;
		const newItems = Array.from({ length: Math.min(itemsPerPage, totalItems - start) }, (_, i) => start + i + 1);
		displayedList.value.push(...newItems);
		loading.value = false;
		currentPage++;
	}, 1000);
}

// 页面加载时加载初始数字数据
onMounted(() => {
	loadData();
});

// 触底时加载更多数字数据
onReachBottom(() => {
	console.log("onReachBottom")
	if (displayedList.value.length < totalItems) {
		loadData();
	}
});

	const count = ref(0);
	onMounted(()=> {
		console.log("onMounted函数222")
	})
	onLoad(()=>{
		console.log("onLoad函数")
	})
	onShow(()=>{
		console.log("onShow函数")
	})
</script>

<style>
	.content {
		padding: 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-weight: bold;
		font-size: 18rpx;
		margin-bottom: 10rpx;
	}

	.list-view {
		margin-bottom: 20rpx; /* 保持 list-view 和数字列表之间的间距 */
	}

	.list-item {
		padding: 10rpx;
		border: 1px solid #ccc;
		margin-bottom: 10rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 15rpx;
		border: 2px solid #007aff;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-weight: bold;
		font-size: 28rpx;
		color: #333;
	}

	.gender, .age, .phone, .address {
		color: #666;
		font-size: 24rpx;
	}

	.number-list {
		margin-top: 20rpx; /* 数字列表的顶部间距 */
	}

	.number-item {
		padding: 10rpx;
		border: 1px solid #ccc;
		margin-bottom: 10rpx;
	}

	.loading {
		text-align: center;
		color: #999;
	}
</style>
